<template>
    <div class="memberTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">会员管理表列表</span></el-divider>
        </div>

        <div class="batchOPT">
            <el-button class="batchBTN" @click="toggleSelection([members[1],members[2]])">批量删除</el-button>
        </div>
        <div class="addMember">
            <el-button class="addBTN" type="primary" icon="el-icon-circle-plus-outline" @click="addMember">新增
            </el-button>
        </div>
        <!--:data绑定data中预设的参数
        单行显示:show-overflow-tooltip="true"
        如果为tr，则需要v-for="(member,index) of members" :key="index"
        -->
        <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                :data="members"
                :show-overflow-tooltip="true"
                border
                style="width: 100%"
                class="previous-row"
                :header-cell-style="{backgroundImage:'linear-gradient(#ff6e02,#ff6d00)',color:'#ffffff',}"
        >

            <el-table-column type="selection" width="35">
            </el-table-column>
            <el-table-column
                    sortable
                    fixed
                    prop="uniId"
                    label="ID"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="name"
                    label="姓名"
                    width="70"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="nickName"
                    label="昵称"
                    width="80"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    fixed
                    prop="icon"
                    label="头像"
                    width="60"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <!--<el-avatar v-if="!employee.icon" src="../../imgs/logo300-1.png"></el-avatar>-->
                    <el-avatar :src="scope.row.icon"></el-avatar>
                </template>
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="wechatCode"
                    label="微信二维码"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    fixed
                    prop="mobile"
                    label="手机号"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="email"
                    label="邮箱"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="password"
                    label="密码"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="identityNum"
                    label="身份证号"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="identityCard"
                    label="身份证图片"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="province.add"
                    label="省"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="city.add"
                    label="市"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="district.add"
                    label="区"
                    width="100"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="bankNum"
                    label="银行卡号"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="bankCard"
                    label="银行卡"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="registerId"
                    label="注册IP"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <!--<el-table-column
                    sortable
                    fixed
                    prop="loginIp"
                    label="登录IP"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="level"
                    label="会员等级"
                    width="100"
                    :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.level === 1 ? 'primary' : 'success'"
                            size="mini" disable-transitions>{{level | optionObjectKV(scope.row.level)}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                    sortable
                    prop="pageClick"
                    label="访问量"
                    width="80"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <!--<el-table-column
                    sortable
                    fixed
                    prop="motto"
                    label="座右铭"
                    width="60"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>-->

            <el-table-column
                    sortable
                    prop="createTime"
                    label="创建时间"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    sortable
                    prop="updateTime"
                    label="更新时间"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>

            <el-table-column
                    class="optionList"
                    fixed="right"
                    label="操作"
                    width="220">
                <!--使用slot-scope传递当前行参数-->
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            @click="updatePWD(scope.row)">修改密码
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="del(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>


        <div class="pageHelper">
            <el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>
            <page-helper ref="pageHelper" :list="pageList"></page-helper>

        </div>

        <div class="editPassword">
            <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                <div slot="title" class="header-title">
                    <div style="padding:15px 20px;">{{this.dialogTitle}}</div>
                </div>
                <el-form v-model="member">
                    <el-form-item :label="labelName" :label-width="formLabelWidth" >
                        <el-input v-model="member.mobile" autocomplete="off" :disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item :label="labelContent" :label-width="formLabelWidth">
                        <el-input placeholder="请输入新密码" v-model="member.password" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editPWD">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import PageHelper from "../../../components/PageHelper";

    export default {
        name: "MemberSet",
        //引用组件
        components: {PageHelper},
        data() {
            return {
                message: '这里是大模块-会员管理表内容页',
                members: [],
                member: {},
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                address: [],
                //修改密码
                dialogFormVisible:false,
                dialogTitle:'',
                labelName:'',
                disabled:'disabled',
                labelContent:'',
                formLabelWidth: '120px',
            }
        },
        mounted() {
            this.getAddTree();
            //1.普通列表查询
            this.list();
            //自定义赋值分页每页行数
            this.$refs.pageHelper.size = 10;
            //2.分页列表查询，默认初始化执行第一页
            this.pageList(1);
        },
        methods: {
            //多选的方法
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //1.list查询
            list() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/member/dtoList')
                    .then((response) => {
                        console.log("模块-会员管理表列表：", response);
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/member/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.members = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },
            //3.新增member
            addMember() {
                let address = SessionStorage.get(ADD);
                //可以在这里清空member:this.members=null;
                this.$router.push(
                    {
                        name: "system/manager/member/add",
                        params: {address}
                    }
                );
            },
            //4.修改
            edit(member) {
                /*jquery继承对象： $.extend({新对象},旧对象)
                避免vue数据绑定漏洞，更改数据时，随之更改显示的data，但实际没有进行真实保存数据库
                 */
                let add = [];
                if (Tool.isNotEmpty(member.province)) {
                    add.push(member.province.id);
                }
                if (Tool.isNotEmpty(member.city)) {
                    add.push(member.city.id);
                }
                if (Tool.isNotEmpty(member.district)) {
                    add.push(member.district.id);
                }
                this.member = $.extend({}, member);
                this.$router.push({
                    name: "system/manager/member/add",
                    params: {member, add}
                });
            },
            del(member) {
                /**
                 * 前端=》路径内携带参数使用url：'../'+{param}
                 * 后端=》requestMapping('../{param}')
                 *       void ...(@PathVariable String {param})
                 *
                 * ***引用toast的showConfirm全局方法，需要定义局部变量_this
                 * ***并且将存入的member转化为局部对象，才能获取到uniId
                 */
                let _this = this;
                let memberParam = member;
                toast.showConfirm(member.name, function () {
                        _this.$axios.delete(process.env.VUE_APP_SERVER + '/business/admin/member/del/' + memberParam.uniId)
                            .then((response) => {

                                let resp = response.data;
                                if (resp.success) {
                                    _this.pageList(1);
                                }
                            })

                    }
                )
            },
            //更新显示show
            updateShow(row) {
                this.member = row;
                let responseMsg = '';
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/member/save', this.member)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;

                        if (resp.success) {
                            this.pageList(1);
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },
            getAddTree() {
                Loadings.show();
                if (Tool.isEmpty(SessionStorage.get(ADD))) {
                    let responseMsg = "";
                    this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/address/tree')
                        .then((response) => {
                            Loadings.hide();
                            let resp = response.data;
                            responseMsg = resp;
                            if (resp.success) {
                                //需要过滤tree，否则会生成第四列空数据
                                this.address = Tool.filterTree(resp.responseData);
                                SessionStorage.set(ADD, this.address);
                            } else {
                                this.$notify({
                                    title: '修改失败，请联系管理员!',
                                    message: responseMsg,
                                    position: "top-right",
                                    type: 'warning'
                                });
                            }
                        });
                }

            },

            updatePWD(item){
                this.dialogFormVisible=true;
                this.member=$.extend({},item);
                this.labelName='手机号';
                this.labelContent='新密码';
                this.dialogTitle='设置新密码';
            },
            editPWD(){
                let responseMsg='';
                this.member.password=hex_md5(this.member.password+KEY);
                //前端校验
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/member/save-pwd', this.member)
                    .then((response) => {
                        let resp = response.data;
                        responseMsg = response;
                        this.dialogFormVisible=false;
                        if (resp.success) {
                            this.pageList(1);
                            //引入全局变量toast提示
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '修改密码失败，请联系管理员!',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    });
            },
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*批量操作*/
    .batchOPT {
        float: left;
        margin-left: 2%;
        margin-bottom: 1%;
        z-index: 1;
    }

    /*新增*/
    .addMember {
        float: left;
        margin-left: 5px;
    }

    .addBTN {
        font-size: 16px;
        padding: 11px 20px;
        border: 1px solid white;
        box-shadow: 1px 2px 2px #409eff;
        margin-top: 0;
    }

    .batchBTN {
        background-color: #ff5202;
        color: white;
        box-shadow: 1px 2px 2px #ff6e02;
    }

    .batchBTN:hover {
        background-color: #ff3d02;
        color: white;
    }

    .batchBTN:focus {
        background-color: #ff3d02;
        color: #ffffff;
    }

    /**分页位置/
     */
    .pageHelper {
        margin-left: 60px;
    }

    .flushBTN {
        position: relative;
        float: left;
        max-width: 95px;
        margin-right: 20px;
        margin-top: 5px;
    }
    /*密码模态框*/
    .header-title{
        background: #2589e7;
        color: white;
        font-size: 20px;
    }
    /deep/ .el-dialog__header{
        padding: 0;
    }
    /deep/ .el-dialog--center .el-dialog__body{
        background: #d2d3d04d;
    }
    /deep/ .el-dialog__headerbtn .el-dialog__close{
        color: white;
        font-size: 24px;
    }
    /deep/ .el-form-item__label{
        text-align: center;
        padding: 0;
    }
    /deep/ .el-input .el-input__inner{
        margin-left: -40px;
    }
    /deep/ .el-input__suffix{
        right: 35px;
    }
    /deep/ .el-dialog__body{
        padding: 20px 10px;
    }
    /deep/ .el-form-item{
        margin-bottom: 5px;
    }

</style>